<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script crossorigin="anonymous" src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>
    <style>
        #result {
            width: 200px;
            height: 100px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <button>GET</button>
    <button>POST</button>
    <button>通用型方法ajax</button>
    <div id="result"></div>
    <script>
        const btn = document.querySelectorAll("button");
        const result = document.querySelector("#result");
        // 配置baseURL
        axios.defaults.baseURL = "http://127.0.0.1:8000";

        btn[0].onclick = function() {
            // 传递2个参数，分别是URL，请求的相应信息
            axios.get("/axios-server", {
                // url参数
                params: {
                    id: 100,
                    vip: 7
                },
                // 请求头信息
                headers: {
                    name: "atguigu",
                    age: 20
                }
            }).then(value => {  // 和Promise差不多，用then来处理相应的数据
                console.log(value);
            });
        };

        btn[1].onclick = function() {
            // 3个参数，URL，请求的数据(请求体)，相应的配置信息
            axios.post("/axios-server", {
                username: "admin",
                password: 123456
            }, {
                params: {
                    id: 200,
                    vip: 9
                },
                headers: {
                    height: 180,
                    weight: 180
                },
                
            });
        };

        btn[2].onclick = function() {
            axios({
                method: "POST",
                url: "/axios-server",
                // url参数
                params: {
                    vip: 100,
                    level: 300
                },
                // 头信息
                headers: {
                    x: 1,
                    y: 2
                },
                // 请求体参数
                data : {
                    username: "admin",
                    password: 123456
                }
            }).then(response => {
                // console.log(response);
                // 响应状态码
                console.log(response.status);
                // 响应状态字符串
                console.log(response.statusText);
                // 响应头信息
                console.log(response.headers);
                // 响应体
                console.log(response.data);

            })
        }



        
    </script>
</body>
</html>